<template>
  <div>
    <el-card>
       <el-row width="120px">
        <div class="search">
          <!-- 搜索 -->
      
          <!-- 修改 -->
          <section class="boxContent">
            <input ref="user" placeholder="请输入搜索内容" class="inputSearch"  v-model="keyword" >

            <i class="el-icon-close" @click="clearInput"></i>
          </section>
          <button class="buttonSearch" @click="goSearch">
            搜索
          </button>
        </div>
      </el-row>
      <el-row>
        <div class="abc">
          <!-- 轮播图 -->
          <swiper :options="swiperOption" id="mySwiper" ref="mySwiper">
            <!-- slides -->
            <swiper-slide class="swiper_slide_item"><img src='./images/9172100872625837.jpg' alt=""></swiper-slide>
            <swiper-slide class="swiper_slide_item"><img src='./images/9619200610858971.jpg' alt=""></swiper-slide>
            <swiper-slide class="swiper_slide_item"><img src='./images/9868691810845929.jpg' alt=""></swiper-slide>
            <swiper-slide class="swiper_slide_item"><img src='./images/9172100872625837.jpg' alt=""></swiper-slide>
            <swiper-slide class="swiper_slide_item"><img src='./images/9172100872625837.jpg' alt=""></swiper-slide>
            <swiper-slide class="swiper_slide_item"><img src='./images/9868691810845929.jpg' alt=""></swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <!-- <button @click="to(1)">Slide 1</button>
          <button @click="to(2)">Slide 2</button>
          <button @click="to(3)">Slide 3</button>
          <button @click="to(4)">Slide 4</button>
          <button @click="to(5)">Slide 5</button>
          <button @click="to(6)">Slide 6</button>
          <button @click="to(7)">Slide 7</button> -->
        </div>
      </el-row>
      <!-- <el-row class="masthead" type="flex" :gutter="20" justify="center" :style="{marginTop:'6px'}">
        <el-col :span="4">首页</el-col>
        <el-col :span="4">服装类型</el-col>
        <el-col :span="4">私人订制</el-col>
        <el-col :span="4">成衣推荐</el-col>
        <el-col :span="4">关于我们</el-col>
      </el-row> -->
    </el-card>
    <!-- 最新定制 -->
    <el-card>
      <!-- <Institution></Institution> -->
    </el-card>
    <!-- 推荐商品 -->
    <el-card>
      <!-- <Recommend></Recommend> -->
    </el-card>
    <!-- 类型  -->
    <el-card>
      <!-- <HomeType></HomeType> -->

    </el-card>
    <!-- 页尾 -->
    <!-- <el-card>
      <el-row class="bottom">
        <span>关于我们|</span><span>合作招商|</span><span>联系我们|</span>
        <span>联系客服|</span><span>商家帮助|</span>
        <span>营销中心|</span><span>手机京东|</span><span>友情链接|</span>
        <span>销售联盟|</span><span>风险监测|</span>
        <span>京东公益|</span><span>隐私政策</span>
      </el-row>
      <el-row class="bottom">
        <p> 增值电信业务经营许可证：浙B2-20080224| </p>
        <p>|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|</p>
        <p>增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号</p>
        <p>互联网药品信息服务资格证书（浙）-经营性-2018-0010</p>
        <p>短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号</p>
      </el-row>
    </el-card> -->
  </div>
</template>

<script>

export default {
 
  components: {
    // Institution,
    // Recommend,
    // HomeType
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    to(index) {
      this.swiper.slideTo(index - 1)
    },
    clearInput() {
      this.$refs.user.value = ''
    },
       goSearch() {
         //未输入值就不能跳转
      // if(!this.$refs.user.value)return
      if (this.$route.query) {
        // 如果有query参数也要传
        let loction = {
          name: 'search',
          params: { keyword: this.keyword || undefined }
          // query: { k: this.keyword.toUpperCase() }
        }

        loction.query = this.$route.query
      this.$router.push(loction)
      }
    },
  },
  mounted() {
    console.log(this.swiper)
   
  },
  data() {
    return {
     keyword: '',
      pictures: [
        {
          src: require('./images/9172100872625837.jpg')
        },
        {
          src: require('./images/9172100872625837.jpg')
        },
        {
          src: require('./images/9172100872625837.jpg')
        }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 点击分页器跳切换到相应的幻灯片
        },
        loop: true,
        speed: 1000, // 动画切换速度
        autoplay: {
          delay: 2000, // 幻灯片停留时间
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          stopOnLastSlide: true // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
        },
        on: {
          slideChangeTransitionEnd: function () {
           // console.log(this.activeIndex) //切换结束时，
          }
        }
      }
    }
  },

}
</script>

<style src="./Home.less" lang="less">
</style>